<template class="task-template">
  <section id="ipc-section" class="section js-section u-category-communication">
    <header class="communication">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-communication"></use></svg>
          在进程间通讯
        </h1>
        <h3>通过 <code>ipc</code>（进程间通信）模块允许您在主进程和渲染进程之间发送和接收同步和异步消息.</h3>

        <p>这个模块有一个版本可用于这两个进程: <code>ipcMain</code> 和 <code>ipcRenderer</code>.</p>
        <p>在浏览器中查看 <a href="http://electron.atom.io/docs/api/ipc-main">main process<span class="u-visible-to-screen-reader">(在新窗口中打开)</span></a> 和 <a href="http://electron.atom.io/docs/api/ipc-renderer/">renderer process<span class="u-visible-to-screen-reader">(在新窗口中打开)</span></a> 的完整 API 文档.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="async-msg-demo-toggle" class="js-container-target demo-toggle-button">异步消息
          <div class="demo-meta u-avoid-clicks">支持: Win, macOS, Linux <span class="demo-meta-divider">|</span> 进程: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="async-msg">Ping</button>
            <span class="demo-response" id="async-reply"></span>
          </div>
          <p>使用 <code>ipc</code> 以异步方式在进程之间发送消息是首选方法, 因为它会在完成时返回, 而不会阻止同一进程中的其他操作.</p>

          <p>此示例将从此进程（渲染器）发送异步消息 "Ping" 到主进程, 然后主进程回答 "Pong".</p>
          <h5>渲染器进程</h5>
          <pre><code data-path="renderer-process/communication/async-msg.js"></code></pre>
          <h5>主进程</h5>
          <pre><code data-path="main-process/communication/async-msg.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="sync-msg-demo-toggle" class="js-container-target demo-toggle-button">同步消息
          <div class="demo-meta u-avoid-clicks">支持: Win, macOS, Linux <span class="demo-meta-divider">|</span> 进程: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="sync-msg">Ping</button>
            <span class="demo-response" id="sync-reply"></span>
          </div>
          <p>您可以使用 <code>ipc</code> 模块在进程之间发送同步消息. 但请注意, 此方法的同步特性意味着它在完成任务时<b>会阻止</b>其他操作.</p>
          <p>此示例将从此进程（渲染器）发送同步消息 "Ping" 到主进程, 然后主进程回答 "Pong".</p>
          <h5>渲染器进程</h5>
          <pre><code data-path="renderer-process/communication/sync-msg.js"></code></pre>
          <h5>主进程</h5>
          <pre><code data-path="main-process/communication/sync-msg.js"></code></pre>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="invis-msg-demo-toggle" class="js-container-target demo-toggle-button">与隐藏窗口通信
          <div class="demo-meta u-avoid-clicks">支持: Win, macOS, Linux <span class="demo-meta-divider">|</span> 进程: Both</div>
        </button>
        <div class="demo-box">
          <div class="demo-controls">
            <button class="demo-button" id="invis-msg">计算阶乘</button>
            <span class="demo-response" id="invis-reply"></span>
          </div>
          <p>通常的做法是创建一个新的不可见浏览器窗口（渲染器进程）, 以便在不影响主应用程序窗口中的性能的情况下运行任务.</p>
          <p>在这个示例中, 我们使用 <code>remote</code> 模块从这个渲染器进程创建一个新的不可见的浏览器窗口. 当新页面加载时, 我们用 <code>ipc</code> 发送一个消息给正在监听的新窗口.</p>
          <p>然后新窗口计算阶乘并发送要由此接收的结果到原始窗口并添加到上面的页面中.</p>
          <h5>渲染器进程</h5>
          <pre><code data-path="renderer-process/communication/invisible-msg.js"></code></pre>
          <h5>隐藏窗口页面的HTML</h5>
          <pre><code data-path="sections/communication/invisible.html"></code></pre>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/communication/sync-msg')
      require('./renderer-process/communication/async-msg')
      require('./renderer-process/communication/invisible-msg')
    </script>

  </section>
</template>
